<template>
  <!--任务转派弹窗-->
  <px-dialog v-model="visible" title="任务转派" width="900px" destroy-on-close append-to-body @close="handleCancel">
    <div class="view-equip-detail">
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item middle">
            <div class="label">巡检任务编号</div>
            <div class="text">{{ rowData.taskCode }}</div>
          </div>
          <div class="view-equip-item middle">
            <div class="label">巡检任务名称</div>
            <div class="text">{{ rowData.taskName }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item middle">
            <div class="label">任务开始时间</div>
            <div class="text">{{ rowData.startTime }}</div>
          </div>
          <div class="view-equip-item middle">
            <div class="label">任务结束时间</div>
            <div class="text">{{ rowData.endTime }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item middle">
            <div class="label">当前执行人</div>
            <div class="text">{{ rowData.executorName }}</div>
          </div>
          <div class="view-equip-item middle">
            <div class="label">执行状态</div>
            <div class="text">
              <div class="status">
                <div class="circle" :style="{ backgroundColor: `${tagBgColorList[rowData.taskStatus]}` }" />
                <p :style="{ color: `${tagBgColorList[rowData.taskStatus]}` }">{{ rowData.taskStatusDesc }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <px-form ref="finishRef" :model="formValue" :rules="rules" label-width="100px">
      <px-form-item label="任务转派" prop="transferId">
        <px-select v-model="formValue.transferId" style="width: 100%" filterable clearable placeholder="请选择执行人" @change="handleChange">
          <px-option
            v-for="item in approvalList"
            :key="item.operateId"
            :disabled="item.operateId === rowData.executorId"
            :label="item.operateName"
            :value="item.operateId"
          />
        </px-select>
      </px-form-item>
    </px-form>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="handleCancel">取 消</px-button>
        <px-button type="primary" @click="handleSubmit(finishRef)">确 定</px-button>
      </div>
    </template>
  </px-dialog>
</template>

<script lang="ts" setup>
import { getOpsGroupList } from "@/api/equip/exception";
import { transferTask } from "@/api/equip/inspectTask";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);

// 父级传过来的值
const props = defineProps(["visible", "rowData"]);

const visible = computed(() => props.visible);

const tagBgColorList = {
  0: "#909399", // 已取消
  1: "#909399", // 未开始
  2: "#F59E0B", // 待接单
  3: "#F59E0B", // 待接单超期
  4: "#3B82F6", // 执行中
  5: "#3B82F6", // 执行中超期
  6: "#10B981", // 已完成
  7: "#10B981" // 已完成超期
};

// 表单校验规则
const rules = computed(() => ({
  executorId: [{ required: true, message: "请选择执行人", trigger: ["blur", "change"] }]
}));

const finishRef = ref();

const state = reactive<Record<string, any>>({
  formValue: {},
  approvalList: []
});
const { formValue, approvalList } = toRefs(state);

const handleChange = val => {
  const res = approvalList.value.find(item => item.operateId === val);
  formValue.value.transferName = res.operateName;
};

const handleCancel = () => {
  finishRef.value.resetFields();
  emits("closeDialog");
};

watchEffect(async () => {
  if (props.visible) {
    approvalList.value = await getOpsGroupList(props.rowData.groupCode);
  }
});

/** 提交按钮 */
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      await transferTask({ id: props.rowData.id, ...formValue.value });
      PxMessage.success("转派成功");
      handleCancel();
      emits("queryTable");
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail {
  height: auto;
  padding: 0;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1;

  .circle {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
  }
}
</style>
